<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="../网络请求/js/jquery-3.5.1.min.js"></script>
    <style>
      #goods,
      #price,
      #alls {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="goods"></div>
    <div id="price"></div>
    <div id="alls"></div>
    <!-- 1.准备图表结构 -->
    <script>
      // 1.季度销售
      var myChart = echarts.init(document.getElementById("goods"));
      // 使用柱状图渲染四个季度中每一个商品的季度销售额
      // x轴显示一到四季度
      var option = {
        title: { text: "季度销售" },
        tooltip: {},
        // legend: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
        xAxis: {
          data: ["一季度", "二季度", "三季度", "四季度"],
        },
        yAxis: {},
        series: [],
      };
      myChart.setOption(option);

      // 获取数据
      function getdata(params) {
        // 发起jqajax代码请求地址是http://192.168.123.152:6215/api/chart
        $.ajax({
          url: "http://192.168.123.152:6215/api/chart",
          type: "get",
          success: function (res) {
            console.log(res);
            //  更新季度图表
            updata(res.data);
            //  更新价格图表
            upprice(res.data);
            //  更新销售占比
            upalls(res.data);
          },
        });
      }
      getdata();
      // 更新数据
      function updata(arr) {
        console.log(arr);
        // 根据数据接口生成对应的series选项
        // 定义一个空数组，用于存放 series 配置对象（每个商品对应的柱状图系列）
        var series = [];

        // 定义一个空数组，用于存放图例数据（即商品名称列表）
        let lendata = [];

        // 遍历传入的数据 arr（每个 item 代表一个商品及其季度数据）
        arr.forEach((item) => {
          // 创建一个 series 对象，对应一个商品的柱状图数据
          var obj = {
            name: item.name, // 商品名称，作为图例和提示框中的标识
            type: "bar", // 图表类型为柱状图
            data: item.qdata, // 季度销售数据，是一个包含四个季度销售额的数组
          };

          // 将当前商品的配置对象加入 series 数组
          series.push(obj);

          // 将当前商品名称加入 lendata 数组，用于后续图例显示
          lendata.push(item.name);
        });

        // 更新图表配置，设置新的 series 和 legend 数据
        myChart.setOption({
          series, // 设置柱状图数据系列
          legend: {
            // 设置图例
            data: lendata, // 使用收集到的商品名称作为图例项
          },
        });
      }
    </script>
    <script>
      // 初始化价格
      var priceChart = echarts.init(document.getElementById("price"));

      var option = {
        title: { text: "单品销售" },
        legend: {
          data: ["销量", "价格"],
        },
        tooltip: {},
        xAxis: {
          data: ["一季度", "二季度", "三季度", "四季度"],
        },
        yAxis: {},
        series: [],
      };
      priceChart.setOption(option);
      function upprice(arr) {
        // 根据数据接口生成对应的series选项
        // 定义一个空数组，用于存放图例数据（即商品名称列表）
        let lendata = [];
        // 获取数组中的name名称并生成新的数组
        let xdata = arr.map((item) => item.name);
        let numdata = arr.map((item) => item.num);
        let price = arr.map((item) => item.price);

        let option = {
          xAxis: {
            data: xdata,
          },
          series: [
            { name: "销量", type: "bar", data: numdata },
            { name: "价格", type: "line", data: price },
          ],
        };

        priceChart.setOption(option);
      }
    </script>

    <script>
      // 初始化价格
      var allsChart = echarts.init(document.getElementById("alls"));

      var option = {
        title: {
          text: "销售占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
    //    legend: {
    //       orient: "vertical",
    //       left: "left",
    //     }, 
        series: [
          {
            name: "销售占比",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      allsChart.setOption(option);
      function upprice(arr) {
        // 根据数据接口生成对应的series选项
        // 定义一个空数组，用于存放图例数据（即商品名称列表）
        let lendata = [];
        // 获取数组中的name名称并生成新的数组
        let xdata = arr.map((item) => item.name);
        let numdata = arr.map((item) => item.num);
        let price = arr.map((item) => item.price);

        let option = {
          xAxis: {
            data: xdata,
          },
          series: [
            { name: "销量", type: "bar", data: numdata },
            { name: "价格", type: "line", data: price },
          ],
        };

        priceChart.setOption(option);
      }

      function upalls(arr){
        let data = arr.map((item)=>{
          return {
            value:item.num*item.price,
            name:item.name
          }
        })

        let option = { 
            series: [
          {
            data
          },
        ],
        }
        allsChart.setOption(option)

      }
    </script>
  </body>
</html>
